padOsd: Apply specific CSS to Button/Leader SVG classes

Applying a fill operation on the Leader line path seems to close
it, resulting in filled polygon. Bug or not this is not the intended
result here, we can do less ambiguously by not specifying the fill
CSS property to the Leader class.

Fixes: https://gitlab.gnome.org/GNOME/gnome-shell/-/issues/2570
https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/1290

diff --git a/js/ui/padOsd.js b/js/ui/padOsd.js
index 3d825f9ed7497992f37e6f3ac5715f0c3a98d6d9..115b72be2ed74ed824b4438ee3ae1df0e6628836 100644 (file)
--- a/js/ui/padOsd.js
+++ b/js/ui/padOsd.js
@@ -383,10 +383,8 @@ var PadDiagram = GObject.registerClass({
 
         for (let i = 0; i < this._activeButtons.length; i++) {
             let ch = String.fromCharCode('A'.charCodeAt() + this._activeButtons[i]);
-            css += '.%s {'.format(ch);
-            css += '    stroke: %s !important;'.format(ACTIVE_COLOR);
-            css += '    fill: %s !important;'.format(ACTIVE_COLOR);
-            css += '}';
+            css += '.%s.Leader { stroke: %s !important; }'.format(ch, ACTIVE_COLOR);
+            css += '.%s.Button { stroke: %s !important; fill: %s !important; }'.format(ch, ACTIVE_COLOR, ACTIVE_COLOR);
         }
 
         return css;